<template>
  <el-button @click="showAddCat">添加根节点</el-button>
  <el-tree
      style="max-width: 600px"
      :data="cats"
      :props="defaultProps"
      @node-click="handleNodeClick"
      @node-contextmenu="showContextmenu"
  />
  <!-- 添加节点的弹窗开始 -->
  <el-dialog
      v-model="catAdd.addCatDialogVisible"
      title="新增内容类型"
      width="500"
      :before-close="handleClose"
  >
    <el-form :model="catAdd.cat" label-width="auto" style="max-width: 600px">
      <el-form-item label="父类型">
        <el-tag v-if="!catAdd.isRoot">{{catAdd.currentNode.data.catName}}</el-tag>
        <el-tag v-else>无父类型</el-tag>
      </el-form-item>
      <el-form-item label="类型名称">
        <el-input  v-model="catAdd.cat.catName" />
      </el-form-item>
      <el-form-item label="类型标记">
        <el-input  v-model="catAdd.cat.catMark" />
      </el-form-item>
      <el-form-item label="类型说明">
        <el-input  v-model="catAdd.cat.catDesc" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addCatWinClose">取消</el-button>
        <el-button type="primary" @click="addSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加节点的弹窗结束 -->
  <!-- 树的右键菜单 -->
  <div class="contextmenu" ref="contextmenu">
    <el-row><el-col :span="24"><el-button @click="showAddCatContextmenu()" size="small">新增</el-button></el-col></el-row>

    <el-row><el-col :span="24"><el-button size="small">编辑</el-button></el-col></el-row>
    <el-row><el-col :span="24"> <el-button size="small">删除</el-button></el-col></el-row>
    <el-row><el-col :span="24"> <el-button @click="cancleContextmenu" size="small">取消</el-button></el-col></el-row>
  </div>
</template>
<script>
import categoryRequest from '../../api/ content-category.js';

export default {
  data() {
    return {
      catAdd:{ // 所有的新增弹窗相关的属性
        addCatDialogVisible: false, // 弹窗标记
        cat:{},// 封装新增内容类型对象
        isRoot: true,// 表示是否新增根节点
        currentNode: undefined,// 当前选择的节点对象
      },
      cats: [],//所有的内容类型
      defaultProps: { // 设置属性的对应关系
        label: 'catName',
        children: 'children'
      }
    }
  }, methods: {
    /**
     * 右键新增按钮事件
     */
    showAddCatContextmenu(){
      // 将isRoot修改为false
      if(this.catAdd.currentNode){
        this.catAdd.isRoot = false;
      }
      // 弹窗
      this.showAddCat();
      // 关闭右键菜单
      this.cancleContextmenu();
    },
    /**
     * 整个页面的单击事件，用来取消右键菜单
     */
    cancleContextmenu(){
      this.$refs.contextmenu.style.display='none';
    },
    /**
     * 树节点的右键事件
     */
    showContextmenu(event,data,node){
      console.log(node)
      console.log(event)
      this.$refs.contextmenu.style.display='block';
      this.$refs.contextmenu.style.left=event.clientX+'px';
      this.$refs.contextmenu.style.top=event.clientY+'px';
      // 记录当前选择的节点对象
      this.catAdd.currentNode = node;
    },
    /**
     * 新增内容类型的提交事件
     */
    addSubmit(){
      // 判断是否是新增根节点
      if(!this.catAdd.isRoot){
        // 将currentNod的id赋值给新的cat的parentId
        this.catAdd.cat.parentId = this.catAdd.currentNode.data.catId;
      }
      // 提交数据
      categoryRequest.save(this.catAdd.cat,res => {
        if(res.code == '200'){
          // 消息提示
          this.$message({
            message: '新增内容类型成功',
            type: 'success'
          });
          // 刷新树
          this.loadData();
        }else{
          this.$message({
            message: '新增内容类型失败',
            type: 'error'
          });
        }
      });
      // 关闭窗体
      this.addCatWinClose();
    },
    /**
     * 取消新增的事件
     */
    addCatWinClose(){
      // 将所有对应的数据还原
      this.catAdd.cat = {};
      this.catAdd.addCatDialogVisible = false;
      this.catAdd.currentNode = undefined;
      this.catAdd.isRoot = true;
    },
    /**
     * 打开新增类型的弹窗
     */
    showAddCat(){
      this.catAdd.addCatDialogVisible = true;
    },
    /**
     * 加载所有的内容类型
     */
    loadData() {
      categoryRequest.getCategory(res => {
        this.cats = res.data;
      });
    }
  }, mounted() {
    this.loadData();
  }
}
</script>
<style scoped>
.contextmenu{
  position: absolute; /* 绝对定位  */
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  width: 50px;
  padding: 3px;
  text-align: center;
  display:none;
}
</style>